<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/head.css">
    <link rel="stylesheet" href="../css/foot.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/liebiao.css">
    <link rel="stylesheet" href="../css/xingqing.css">
    <link rel="stylesheet" href="../css/fangdj.css">
    <link rel="stylesheet" href="../css/lunob.css">
    <script src="../js/lunbo.js"></script>
    <script src="../js/ajax.js"></script>
    <style>
        .img_tac {
            text-align: center;
        }
        
        .img_tac img {
            vertical-align: middle;
        }
        
        .swiper-container {
            width: 1200px;
            height: 500px;
        }
        
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
        }
        
        .swiper-slide img:nth-of-type(1) {
            width: 280px;
            height: 372px;
            vertical-align: top;
        }
        
        .swiper-slide p {
            font-size: 14px;
            max-height: 72px;
            font-weight: bold;
            color: #00174f;
            margin-bottom: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            text-align: left;
        }
        
        .swiper-slide span {
            color: #00174f;
            font-size: 16px;
        }
    </style>

</head>

<body>

    <!-- 头部固定区域 -->
    <header>
        <div id="h_con">
            <div class="top_nav">
                <ul>
                    <li>
                        <a href="html/login.html">注册</a>
                    </li>
                    <li>
                        <a href="html/login.html" class="border_r">登录</a>
                    </li>
                    <li>
                        <a href="" class="border_r">我的账户</a>
                        <div class="zhanghu_erji">
                            <p>
                                <a href="">我的订单</a>
                            </p>
                            <p>
                                <a href="">我的优惠券</a>
                            </p>
                        </div>

                    </li>
                    <li>
                        <a href="" class="border_r">客服中心</a>
                        <div class="kefu_erji">
                            <p>
                                <a href="">企业团购</a>
                            </p>
                            <p>
                                <a href="">退换货政策</a>
                            </p>
                            <p>
                                <a href="">在线客服</a>
                            </p>
                            <p>
                                <a href="">订购热线</a>
                            </p>
                            <p>
                                <a href="">400-1985-00</a>
                            </p>
                        </div>
                    </li>
                    <li>
                        <a href="">订单查询</a>
                    </li>
                </ul>
            </div>
            <div class="center_nav">
                <div class="login">
                    <a href="">
                        <img src="../images/logo_03.jpg" alt="">
                    </a>
                </div>
                <div class="sousuo">
                    <a href="">
                        <span>
                            <i></i>
                            搜索
                        </span>
                    </a>
                </div>
                <div class="gouwuche">
                    <a href="">
                        <p>
                            <i></i> 购物车
                            <span>
                                0
                            </span>
                        </p>
                    </a>
                </div>
            </div>
        </div>
    </header>
    <!-- 导航栏部分 -->
    <div id="nav">
        <ul class="navcon same">
            <li><a href="">首页</a></li>
            <li>
                <a href="">春秋新品</a>
                <div class="erji erji_chunqiu">
                    <dl>
                        <dt><a href="javascript:;">男士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                        <dd><a href="javascript:;">配饰</a></dd>
                    </dl>

                    <dl>
                        <dt><a href="javascript:;">女士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">裙装</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                        <dd><a href="javascript:;">配饰</a></dd>
                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (1).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">主体系列</a>
                <div class="erji erji_zhuti">
                    <dl>
                        <dt><a href="javascript:;">特殊系列</a></dt>

                        <dd><a href="javascript:;">粉彩夏日 胶囊系列</a></dd>
                        <dd><a href="javascript:;">艺术家联名系列</a></dd>
                        <dd><a href="javascript:;">520胶囊系列</a></dd>
                        <dd><a href="javascript:;">朴宰范同款</a></dd>
                        <dd><a href="javascript:;">ONE PLANET系列</a></dd>
                        <dd><a href="javascript:;">LUV THE WORLD系列</a></dd>
                        <dd><a href="javascript:;">ABOUTU系列</a></dd>
                    </dl>
                    <div class="erji_img">
                        <img src="../images/1 (2).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">Tommy Hilfiger</a>
                <div class="erji erji_hil">
                    <dl>
                        <dt><a href="javascript:;">男士</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>

                    <dl>
                        <dt><a href="javascript:;">女士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">裙装</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (3).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">Tommy Jeans</a>.
                <div class="erji erji_jeans">
                    <dl>
                        <dt><a href="javascript:;">男士</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>

                    <dl>
                        <dt><a href="javascript:;">女士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">裙装</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (4).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">男装</a>
                <div class="erji erji_nanzhuang">
                    <dl>
                        <dt><a href="javascript:;">男士</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>
                    <div class="erji_img">
                        <img src="../images/1 (5).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">女装</a>
                <div class="erji erji_nvzhuang">
                    <dl>
                        <dt><a href="javascript:;">女士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">裙装</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>
                    <div class="erji_img">
                        <img src="../images/1 (6).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">童装</a>
                <div class="erji erji_tongzhuang">
                    <dl>
                        <dt>全部男童</dt>
                        <dt>上装</dt>
                        <dt>下装</dt>
                    </dl>
                    <dl>
                        <dt>全部女童</dt>
                        <dt>上装</dt>
                        <dt>下装</dt>
                    </dl>
                    <div class="erji_img">
                        <img src="../images/1 (7).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">配饰</a>
                <div class="erji erji_peishi">
                    <dl>
                        <dt><a href="javascript:;">男士配件</a></dt>

                        <dd><a href="javascript:;">包袋</a></dd>
                        <dd><a href="javascript:;">手表</a></dd>
                        <dd><a href="javascript:;">鞋子</a></dd>
                        <dd><a href="javascript:;">腰带</a></dd>
                        <dd><a href="javascript:;">帽子</a></dd>
                        <dd><a href="javascript:;">内衣</a></dd>
                        <dd><a href="javascript:;">家居服</a></dd>
                        <dd><a href="javascript:;">袜子</a></dd>
                    </dl>

                    <dl>
                        <dt><a href="javascript:;">女士配件</a></dt>

                        <dd><a href="javascript:;">包袋</a></dd>
                        <dd><a href="javascript:;">手表</a></dd>
                        <dd><a href="javascript:;">鞋子</a></dd>
                        <dd><a href="javascript:;">腰带</a></dd>
                        <dd><a href="javascript:;">帽子</a></dd>
                        <dd><a href="javascript:;">内衣</a></dd>
                        <dd><a href="javascript:;">家居服</a></dd>
                        <dd><a href="javascript:;">袜子</a></dd>

                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (8).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">SALE</a>
                <div class="erji erji_sale">
                    <dl>
                        <dt><a href="javascript:;">全部男装</a></dt>

                        <dd><a href="javascript:;">6折专区</a></dd>
                        <dd><a href="javascript:;">7折专区</a></dd>
                        <dd><a href="javascript:;">8折专区</a></dd>
                        <dd><a href="javascript:;">9折专区</a></dd>

                    </dl>

                    <dl>
                        <dt><a href="javascript:;">全部女装</a></dt>

                        <dd><a href="javascript:;">5折专区</a></dd>
                        <dd><a href="javascript:;">6折专区</a></dd>
                        <dd><a href="javascript:;">7折专区</a></dd>
                        <dd><a href="javascript:;">8折专区</a></dd>
                        <dd><a href="javascript:;">9折专区</a></dd>

                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (9).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">附近门店</a></li>
        </ul>
    </div>
    <!-- ---------------------- -->
    <ul id="biaoti" class="same">
        <li><a href="javascript:;">首页</a></li>
        <li><a href="javascropt:;">></a></li>
        <li><a href="javascript:;">Tommy 男装经典春夏（三件套）青春晾感纯色圆领短袖T恤05187</a></li>
    </ul>
    <div id="content" class="same">
        <!-- 放大镜start -->
        <div id="c_img" class="imgdet wrap">
            <!-- 左侧图片列表 -->
            <div class="imglist">
                <ul>
                    <li class="active">
                        <img src="../images/fdj (1).jpg" alt="">
                    </li>
                    <li class="">
                        <img src="../images/fdj (2).jpg" alt="">
                    </li>
                    <li class="">
                        <img src="../images/fdj (3).jpg" alt="">
                    </li>
                    <li class="">
                        <img src="../images/fdj (4).jpg" alt="">
                    </li>
                    <li class="">
                        <img src="../images/fdj (5).jpg" alt="">
                    </li>
                </ul>
            </div>
            <div class="imgpart">
                <!-- 图片展示 -->
                <div class="pic">
                    <img src="../images/1611209669545938_1500X1987.jpg" alt="">
                    <!-- 镜片 -->
                    <div class="magnify" style="display: none; top: 67px; left: 0px;"></div>
                </div>
                <!-- 放大后的图片, 放大后的图片的尺寸要设置为展示图片的倍数（2倍）-->
                <div class="bigpic" style="display: none;">
                    <img src="../images/1611209669545938_1500X1987.jpg" alt="" style="top: -134px; left: 0px;">
                </div>
            </div>
        </div>
        <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <script src="../js/c.js"></script>
        <script src="../js/d.js"></script>
        <!-- 放大镜end -->
        <!-- <div>
            <img src="../images/16183816312107172_1500X1987.jpg" alt="">
        </div> -->
        <div id="c_right">
            <div class="cr_img">
                <img src="../images/PDP-PC-th.png" alt="">
            </div>
            <p class="biaotixq">Tommy 男装经典春夏（三件装）青春凉感纯色圆领短袖T恤05187</p>
            <p class="del"><del>￥590</del></p>
            <p class="jiage">￥472</p>
            <p class="duodang">多档满减 · 满赠好礼 <a href="javascript:;">详情></a></p>
            <p class="xiadan">下单方式：</p>
            <p class="kuaidi"><a href="">快递</a></p>
            <p class="color1">颜色：灰色</p>
            <p class="color2">
                <span></span>
                <span></span>
            </p>
            <p class="chicun">尺寸：
                <span>请选择下方的尺寸</span>
                <span>尺寸详情</span>
            </p>
            <ul class="cc_ul">
                <li><a href="javascript:;">s</a></li>
                <li><a href="javascript:;">m</a></li>
                <li><a href="javascript:;">l</a></li>
                <li><a href="javascript:;">xl</a></li>
            </ul>
            <p class="shuliang">数量：
                <span>-</span>
                <span>1</span>
                <span>+</span> &nbsp;件
            </p>
            <div class="btn_1">
                <button>加入购物车</button>
                <button>立即购买</button>
            </div>
            <p class="xqsm">详情说明</p>
            <ul class="sm_ul">
                <li>
                    <span>成分：</span> 95%棉 5%氨纶（装饰部分除外）
                </li>
                <li>
                    <span>洗标：</span> 与深色衣物分开洗，立即晾干。请勿熨烫装饰物。冷水非常缓和机洗（水温低于30℃），禁止氯漂，在阴凉处悬挂晾干，低温熨烫（温度低于110℃），不可干洗
                </li>
                <li>
                    <span>产地：</span> 斯里兰卡
                </li>
                <li>
                    <span>款号:</span> 2S879051870XJ
                </li>
            </ul>
            <div class="thh">
                退换货政策
            </div>
            <div class="thh">
                价格说明
            </div>
            <div class="thh">
                分享至
            </div>
        </div>
        <div class="img_tac same">
            <img src="../images/15958376303532876.png" alt="">
        </div>
        <h4 class="dapei same">搭配推荐</h4>
        <div class="swiper-container">
            <div class="swiper-wrapper">

                <!-- <div class="swiper-slide">Slide 8</div> -->

            </div>
            <!-- Add Pagination -->
            <!-- <div class="swiper-pagination"></div> -->
            <!-- Add Arrows -->
            <div class="swiper-button-next">

            </div>
            <div class="swiper-button-prev"></div>
        </div>

        <!-- Swiper JS -->
        <script src="../package/swiper-bundle.min.js"></script>

        <!-- Initialize Swiper -->
        <script>
            // ---------------轮播---------------
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 4,
                spaceBetween: 20,
                slidesPerGroup: 1,
                loop: true,
                loopFillGroupWithBlank: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
            // --------------数据渲染--------------
            let oBanner = document.querySelector('.swiper-wrapper')

            ajax({
                url: '../json/b.json',
                data: {
                    id: 9527
                },
                type: 'post',
                success(res) {
                    console.log(res)

                    // 渲染swiper数据
                    arr = JSON.parse(res).data
                    arr.forEach(ele => {
                        let str = `<div class="swiper-slide">                           
                <img src="${ele.imgUrl}" />
                <img src="../images/PLP-PC-th.png" alt="">
                <p>${ele.txt}</p>
                <span>${ele.price}</span>
               
            </div>`
                        oBanner.innerHTML += str
                    })
                }
            })
        </script>











    </div>







    <!-- 立即注册 -->
    <div id="join">
        <div class="join-club same">
            <div class="join-club-content">
                <div class="join-club-title">

                    加入MY TOMMY会员俱乐部
                </div>
                <div class="join-club-main">
                    <p>注册即可加入MY TOMMY会员俱乐部，立赠200元礼券。</p>
                    <p>消费满额可升级VIP会员，尊享更多优惠，
                        <a class="check-vip-terms" href="/newActivity/VIPSS21">查看VIP机制与权益</a>
                    </p>
                </div>
            </div>
            <div class="join-club-handel">
                <button class="regist-now register-button">立即注册</button>
                <div class="login-button-wrapper">
                    <div class="login-now login-button">已有账号，立即登录</div>
                </div>
            </div>
        </div>

    </div>
    <!-- 尾部尾部 -->
    <div class="pc-footer-content">
        <div class="pc-footer-main same">
            <div class="pc-footer-logo">
                <img src="images/logo_03.jpg" alt="">
            </div>
            <div class="pc-footer-links">
                <div class="pc-footer-link">
                    <div class="link-title--footer">
                        产品探索
                    </div>
                    <ul class="link-detail">
                        <li class="link__item"> <a href="">当季新品</a> </li>
                        <li class="link__item"> <a href="">产品系列</a> </li>
                        <li class="link__item"> <a href="">主题系列</a> </li>
                        <li class="link__item"> <a href="">男装</a> </li>
                        <li class="link__item"> <a href="">女装</a> </li>
                        <li class="link__item"> <a href="">童装</a> </li>
                        <li class="link__item"> <a href="">配件</a> </li>
                    </ul>
                </div>
                <div class="pc-footer-link">
                    <div class="link-title--footer">
                        客户服务
                    </div>
                    <ul class="link-detail">
                        <li class="link__item"> <a href="">订单查询</a> </li>
                        <li class="link__item"> <a href="">配送方式及时间</a> </li>
                        <li class="link__item"> <a href="">退换货政策</a> </li>
                        <li class="link__item"> <a href="">尺码指导</a> </li>
                        <li class="link__item"> <a href="">会员机制与权益</a> </li>
                        <li class="link__item"> <a href="">企业团购</a> </li>
                        <li class="link__item"> <a href="">隐私政策</a> </li>
                        <li class="link__item"> <a href="">门店自提/预约/代退货</a> </li>
                    </ul>
                </div>
                <div class="pc-footer-link">
                    <div class="link-title--footer">
                        关于我们
                    </div>
                    <ul class="link-detail">
                        <li class="link__item"> <a href="">品牌故事</a> </li>
                        <li class="link__item"> <a href="">附近门店</a> </li>
                        <li class="link__item">
                            <a href=" target=" _blank ">新浪微博</a> </li>
                        <li class=" link__item "> <a href=" ">假冒产品</a> </li>
                    </ul>
                </div>
                <div class=" pc-footer-link ">
                    <div class=" link-title--footer ">
                        联系我们
                    </div>
                    <ul class=" link-detail ">
                        <li class=" link__item footer-customer-service ">
                            <div class=" customer-service-text ">
                                在线客服（9:00-22:00）
                            </div>
                        </li>
                        <li class=" link__item ">客服电话（400-019-8500）</li>
                        <li class=" link__item "> <a href=" ">发送Email</a> </li>
                    </ul>
                </div>
                <div class=" contact ">
                    <!-- <div class=" qrcode " style=" display: none; ">
                        <img src=" " alt=" ">
                    </div>
                    <div class=" smallprogram "  style=" display: none; ">
                        <img src=" " alt=" ">
                    </div> -->
                    <div class=" contact-detail ">
                        <div class=" contact-title ">
                            关注我们
                        </div>
                        <div class=" contact-type ">
                            <img class=" smallprogram_wechat " src=" " alt=" ">
                            <img class=" wechat " src=" " alt=" ">
                            <a href=" " target=" _blank "> <img src=" " alt=" "> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class=" copyright same ">
            <div>
                客服服务时间为：9:00至22:00（全年无休，法定节日除外）
            </div>
            <div class=" links " style=" margin-left: -260px; ">
                <a target=" _blank " href=" " class=" record ">沪ICP备12000910号</a>
            </div>
            <div class=" links ">
                <a target=" _blank " 
                    class=" industrial ">上海工商</a>
            </div>
        </div>
    </div>





</body>

</html>